<template>
    <div>
        <el-tree v-loading="menuLoding" :data="data" node-key="id" :default-expand-all="true"
            :expand-on-click-node="false" @node-click="menuClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <div>
                    <span style="padding-left:20px"><i :class="data.icon"></i>&nbsp;{{ data.name }}</span>
                    <span style="padding-left:20px">
                        <el-divider direction="vertical"></el-divider>
                    </span>
                    <span style="padding-left:20px">导航路径:&nbsp;&nbsp;{{ data.path }}</span>
                    <span style="padding-left:20px">
                        <el-divider direction="vertical"></el-divider>
                    </span>
                    <span style="padding-left:20px">组件路径:&nbsp;&nbsp;{{ data.component }}</span>
                    <span style="padding-left:20px">
                        <el-divider direction="vertical"></el-divider>
                    </span>
                    <span style="padding-left:20px">
                        是否启用:&nbsp;&nbsp;<template v-if="data.hidden">停用</template>
                        <template v-else>启用</template>
                    </span>
                    <span style="padding-left:20px">
                        <el-divider direction="vertical"></el-divider>
                    </span>
                    <span style="padding-left:20px">
                        <template v-if="data.alone">单节点</template>
                        <template v-else>多节点</template>
                    </span>
                </div>
            </span>
        </el-tree>

        <el-drawer title="菜单配置修改" :visible.sync="editMenuDrawer" direction="rtl" size="30%"
            @close="closeMenuDrawer('menuForm')">
            <el-form label-position="top" :model="menuFormData" style="width:90%;padding-left:20px;" :rules="menuRules"
                ref="menuForm">
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="menuFormData.name"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon">
                    <el-input v-model="menuFormData.icon"></el-input>
                </el-form-item>
                <el-form-item label="导航路径" prop="path">
                    <el-input v-model="menuFormData.path"></el-input>
                </el-form-item>
                <el-form-item label="组件路径" prop="component">
                    <el-input v-model="menuFormData.component"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-switch v-model="menuFormData.hidden" active-text="停用" inactive-text="启用" active-color="#ff4949"
                        inactive-color="#13ce66">
                    </el-switch>
                    <el-switch style="padding-left:20px" v-model="menuFormData.alone" active-text="单节点"
                        inactive-text="多节点">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="menuSubmit('menuForm')">修改</el-button>
                    <el-button @click="editMenuDrawer=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        
    </div>

</template>

<script>
    import {
        getMenuData,
        editMenuData
    } from "@/api/menuApi";

    export default {
        data() {
            return {
                data: [], //菜单全部数据
                editMenuDrawer: false, //菜单修改抽屉窗口是否打开
                menuLoding: false, //菜单树加载
                menuFormData: { //menu表单数据
                    id: '',
                    name: '',
                    path: '',
                    component: '',
                    hidden: false,
                    icon: '',
                    alone: false
                },
                menuRules: { //表单验证规则
                    name: [{
                        required: true,
                        message: '请输入菜单名称',
                        trigger: 'blur'
                    }],
                    icon: [{
                        required: true,
                        message: '请输入对应icon图标',
                        trigger: 'blur'
                    }],
                    path: [{
                        required: true,
                        message: '请输入导航路径',
                        trigger: 'blur'
                    }],
                    component: [{
                        required: true,
                        message: '请输入组件路径',
                        trigger: 'blur'
                    }]
                }
            }
        },
        created: function () {
            this.getMenuData()
        },
        methods: {
            //获取所有数据
            getMenuData() {
                this.menuLoding = true
                getMenuData().then(response => {
                    this.data = response.data.data
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })
                })
                this.menuLoding = false
            },
            //节点点击事件
            closeMenuDrawer(formName) {
                this.$refs[formName].resetFields();
            },
            menuClick(a, b, c) {
                let obj = JSON.parse(JSON.stringify(a))
                this.menuFormData.id = parseInt(obj.id)
                this.menuFormData.name = obj.name
                this.menuFormData.path = obj.path
                this.menuFormData.component = obj.component
                this.menuFormData.hidden = obj.hidden
                this.menuFormData.icon = obj.icon
                this.menuFormData.alone = obj.alone
                this.editMenuDrawer = true
            },
            menuSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.menuLoding = true
                        let obj = {
                            mid: this.menuFormData.id,
                            path: this.menuFormData.path,
                            menuName: this.menuFormData.name,
                            component: this.menuFormData.component,
                            hidden: this.menuFormData.hidden,
                            icon: this.menuFormData.icon,
                            alone: this.menuFormData.alone
                        }
                        editMenuData(JSON.stringify(obj)).then(response => {
                            this.getMenuData()
                            if (response.data.data) {
                                this.$message({
                                    message: '菜单配置修改成功',
                                    type: 'success'
                                });
                            }
                        }).catch(error => {
                            this.$message({
                                showClose: true,
                                message: error,
                                type: 'error'
                            })
                        })
                        this.menuLoding = false
                    } else {
                        return false;
                    }
                });

            }
        }
    }
</script>


<style>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .el-tree-node__content:hover {
        background-color: #70b3ff87;
    }
</style>